<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--试品明细-->
			<view class="detail-item">
				<uni-section title="试品明细" type="line"></uni-section>
				<view class="detail-content">
					<view class="detail-text">
						线索ID：
						<text>{{info.clueId}}</text>
						<text v-if="checkPermi(['zhouyz:salesmanClue:query'])" class="detail-text-copy" @click="showClue(info.clueId)">查看</text>
					</view>
					<view class="detail-text" v-if="info.clueFollowId > 0">
						线索跟进ID：<text>{{info.clueFollowId}}</text>
						<text v-if="checkPermi(['zhouyz:salesmanClueFollow:query'])" class="detail-text-copy" @click="showClueFollow(info.clueFollowId)">查看</text>
					</view>
					<view class="detail-text">
						客户：
						<text></text></view>
					<view class="detail-text">
						联系电话：
						<text></text></view>
					<view class="detail-text">
						门店名称：
						<text></text></view>
					<view class="detail-text">
						商品名称：<text>{{info.productName}}</text>
						<text class="detail-text-copy" @click.stop="copyText(info.productName)">复制</text>
					</view>
					<view class="detail-text">
						批次号：<text>{{info.batchNumber}}</text>
						<text class="detail-text-copy" @click.stop="copyText(info.batchNumber)">复制</text>
					</view>
					<view class="detail-text">
						试菜数量：<text>{{info.testNumber}}</text>
					</view>
					<view class="detail-text" v-if="checkPermi(['zhouyz:purchaseOrder:price'])">
						采购单价：<text>{{info.purchasePrice}}</text>
					</view>
					<view class="detail-text">
						销售单价：<text>{{info.salesPrice}}</text>
					</view>
					<view class="detail-text">
						仓库：<text>{{info.warehouseName}}</text>
					</view>
					<view class="detail-text">
						申请人：<text>{{info.applyName}}</text>
					</view>
					<view class="detail-text">
						申请时间：<text>{{info.applyTime}}</text>
					</view>
					<view class="detail-text" v-if="info.auditName">
						审核人：<text>{{info.auditName}}</text>
					</view>
					<view class="detail-text" v-if="info.auditName">
						审核时间：<text>{{info.auditTime}}</text>
					</view>
					<view class="detail-text" v-if="info.warehousePickId">
						拣货人：<text>{{info.warehousePickId}}</text>
					</view>
					<view class="detail-text" v-if="info.warehousePickId">
						拣货时间：<text>{{info.warehousePickTime}}</text>
					</view>
					<view class="detail-text">
						状态：
						<uni-tag size="small" :class="`status${info.status}`" :text="arrText(salesmanClueFollowProductStatusList, info.status)" />
					</view>
					<view class="detail-text">
						备注：<text>{{info.remark}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { copyText, arrText, previewImg } from '@/utils/ty.js';
import { salesmanClueFollowProductDetail } from "@/api/erp_api/sale"
import useUserStore from '@/store/modules/user'
import { salesmanClueFollowProductStatusList } from '@/utils/config.js'

	const userStore = useUserStore()
	onLoad(async (option) => {
		if (option.id) {
			id.value = option.id
			getDetail()
		}
	})
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		salesmanClueFollowProductDetail(params).then(res => {
			info.value = res.data || {}
			isLoading.value = false
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	const showClue = (id) => {
		uni.navigateTo({
			url: `/pages/sale/salesmanClueDetail?id=${id}`
		})
	}
	
	const showClueFollow = (id) => {
		uni.navigateTo({
			url: `/pages/sale/salesmanClueFollowDetail?id=${id}`
		})
	}
</script>

<style scoped lang="scss">
	.status1 {
		background-color: #71d5a1;
		border-color: #71d5a1;
	}
	.status2 {
		background-color: #fa3534;
		border-color: #fa3534;
	}
	.status3 {
		background-color: #fcbd71;
		border-color: #fcbd71;
	}
	.status4 {
		background-color: #19be6b;
		border-color: #19be6b;
	}
</style>
